<!DOCTYPE html>
<html lang="">

<head>
    <meta charset="utf-8">
    <!-- 禁用缓存 start -->
    <meta http-equiv="pragram" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- 禁用缓存 end -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- <link rel="shortcut icon" href="<%= VUE_APP_STATIC %>favicon.ico" /> -->
    <!-- <link rel="shortcut icon" href="./favicon.ico" /> -->
    <link rel="shortcut icon" href="https://gitee.com/hey-u/nav/raw/master/static/images/favicon.ico" />
    <link async rel="stylesheet" href="./iconfont.css">
    <!-- <link rel="manifest" href="./manifest.json"> -->
    <title>
        <%= htmlWebpackPlugin.options.title %>
    </title>
</head>

<body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <script>
        const timing = window.performance && window.performance.timing;
        // 白屏时间
        const whiteScreenTime = new Date().getTime() - performance.timing.navigationStart
        console.log('whiteScreenTime=', whiteScreenTime);
        // 首屏时间
        window.onload = function() {
            const firstScreenTime = new Date().getTime() - performance.timing.navigationStart
            console.log('firstScreenTime=', firstScreenTime);
        }

        ;
        (function() {

            handleAddListener('load', getTiming)

            function handleAddListener(type, fn) {
                if (window.addEventListener) {
                    window.addEventListener(type, fn)
                } else {
                    window.attachEvent('on' + type, fn)
                }
            }

            function getTiming() {
                try {
                    var time = performance.timing;
                    var timingObj = {};
                    var loadTime = (time.loadEventEnd - time.loadEventStart) / 1000;

                    timingObj['重定向时间'] = (time.redirectEnd - time.redirectStart) / 1000;
                    timingObj['DNS解析时间'] = (time.domainLookupEnd - time.domainLookupStart) / 1000;
                    timingObj['TCP完成握手时间'] = (time.connectEnd - time.connectStart) / 1000;
                    timingObj['HTTP请求响应完成时间'] = (time.responseEnd - time.requestStart) / 1000;
                    timingObj['DOM开始加载前所花费时间'] = (time.responseEnd - time.navigationStart) / 1000;
                    timingObj['DOM加载完成时间'] = (time.domComplete - time.domLoading) / 1000;
                    timingObj['首屏到达时间'] = (new Date().getTime() - timing.navigationStart) / 1000;
                    timingObj['DOM结构解析完成时间'] = (time.domInteractive - time.domLoading) / 1000;
                    timingObj['脚本加载时间'] = (time.domContentLoadedEventEnd - time.domContentLoadedEventStart) / 1000;
                    // timingObj['onload事件时间'] = (time.loadEventEnd - time.loadEventStart) / 1000;
                    timingObj['页面完全加载时间'] = (timingObj['重定向时间'] + timingObj['DNS解析时间'] + timingObj['TCP完成握手时间'] + timingObj['HTTP请求响应完成时间'] + timingObj['DOM结构解析完成时间'] + timingObj['DOM加载完成时间']);

                    console.log(timingObj);
                    // for (item in timingObj) {
                    //     console.log(item + ":" + timingObj[item] + '秒(s)');
                    // }
                } catch (e) {
                    console.log(timingObj)
                    console.log(performance.timing);
                }
            }
        })();
    </script>
</body>

</html>